<template>
  <div class="app-header">
    <div class="app-header__item app-header__title">
      <slot name="title"></slot>
    </div>
    <div class="app-header__item">
      <slot name="city"></slot>
    </div>
    <div class="app-header__item app-header__login">
      <slot name="login"></slot>
      <slot name="line"></slot>
      <slot name="register"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppHeader',
  data () {
    return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang=scss>
  .app-header{
    width: 750px;
    height: 90px;
    display: flex;
    align-items: center;
    background-color: #3190e8;
    .app-header__item{
      width: 60%;
      span{
        font-size: 28px;
        color: #fff;
      }
      img{
        width: 42px;
      }
      p{
        font-size: 37px;
        text-align: center;
        color: #fff;
        margin-left: 10%;
      }
    }
    .app-header__title{
      width: 15%;
      margin-left: 20px;
    }
    .app-header__login{
      width: 25%;
      margin-left: 25px;
      text-align: center;
    }
  }
</style>
